<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="<s:url value="/assets/web/css/base.css"></s:url>"><!-- 基本框css -->
    <link rel="stylesheet" href="<s:url value="/assets/web/css/login/bootstrap.min.css?v=3.3.6"></s:url>">
    <link rel="stylesheet" href="<s:url value="/assets/web/css/base_nav.css"></s:url>">
    <link rel="stylesheet" href="<s:url value="/assets/css/jquery-ui.css"></s:url>"/>
    <link rel="stylesheet" href="<s:url value="/assets/css/datepicker.css"></s:url>"/>
    <title>征迁进度填报</title>
    <style>
        .container {
            width: auto;
        }

        .av {
            background-color: #fff;
            height: auto !important;
        }

        .pType {
            background: #fff;
            padding: 5px 0px 5px 8px;
            border-radius: 6px;
            margin: 3px 0px 3px 0px;
        }
    </style>
</head>

<body class="bgcolor">
<%@ include file="/WEB-INF/views/modules/commons/nav.jsp" %>
<%@ include file="/WEB-INF/views/modules/commons/menu.jsp" %>

<table></table>
<!-- 窗口显示区 -->
<div class="av row J_mainContent" id="content-main">

    <div class="container">
        <%--征迁计划模态框--%>
        <div class="modal fade" id="myPlanModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" style="width: 800px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel_plan">
                            填写征迁计划
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form id="themeForm_plan" method="post" action="" class="form-horizontal">
                            <input type="text" id="projectId_id_plan"
                                   class="form-control hidden" value="${newProject.sysId}"
                                   name="projectId"/>
                            <div class="form-group">
                                <div class="col-sm-6">
                                    <label class="col-lg-5 control-label" for="dataTime_id_plan">计划时间</label>
                                    <div class="col-lg-7">
                                        <input type="text" id="dataTime_id_plan" value="${currentMonth}"
                                               class="form-control date-picker1" autocomplete='off' name="dataTime"/>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="col-lg-5 control-label" for="relocateType_id_plan">征迁类型</label>
                                    <div class="col-lg-7">
                                        <select class="form-control" id="relocateType_id_plan" name="relocateType">
                                            <option value="1">征地</option>
                                            <option value="2">拆迁</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-6">
                                    <label class="col-lg-5 control-label" for="planData_id_plan">征迁目标(亩)</label>
                                    <div class="col-lg-7">
                                        <input type="text" id="planData_id_plan"
                                               class="form-control" autocomplete='off' name="planData" required
                                               onkeyup="javascript:CheckInputIntFloat(this);"/>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="col-lg-5 control-label" for="content_id_plan">计划内容</label>
                                    <div class="col-lg-7">
                                        <textarea rows="3" id="content_id_plan" required
                                                  class="form-control" autocomplete='off' name="content"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" id="close-modal-progress_plan" class="btn btn-default"
                                        data-dismiss="modal">关闭
                                </button>
                                <button type="submit" class="btn btn-primary" id="addPlan">添加计划</button>
                            </div>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <%--征迁进度模态框--%>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" style="width: 1000px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            填写征迁进度
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form id="themeForm" method="post" action="" class="form-horizontal">
                            <input type="text" id="projectId_id"
                                   class="form-control date-picker1 hidden" value="${newProject.sysId}"
                                   name="projectId"/>
                            <div class="form-group">
                                <div class="col-sm-6">
                                    <label class="col-lg-5 control-label" for="dataTime_id">数据时间(默认当月)</label>
                                    <div class="col-lg-7">
                                        <input type="text" id="dataTime_id" value="${currentMonth}"
                                               class="form-control date-picker1" autocomplete='off' name="dataTime"/>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="col-lg-5 control-label" for="progressData_id">完成值(亩)</label>
                                    <div class="col-lg-7">
                                        <input type="text" id="progressData_id"
                                               class="form-control" autocomplete='off' name="progressData"
                                               onkeyup="javascript:CheckInputIntFloat(this);"/>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-6">
                                    <label class="col-lg-5 control-label" for="progressDescription_id">实际进度描述</label>
                                    <div class="col-lg-7">
                                        <textarea rows="3" id="progressDescription_id" required
                                                  class="form-control" autocomplete='off'
                                                  name="progressDescription"></textarea>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label class="col-lg-5 control-label" for="problem_id">存在问题、需协调事项</label>
                                    <div class="col-lg-7">
                                        <textarea rows="3" class="form-control" required
                                                  id="problem_id" autocomplete='off' name="problem"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-6">
                                    <label class="col-lg-5 control-label" for="nextPlan_id">下一步计划</label>
                                    <div class="col-lg-7">
                                        <textarea rows="3" id="nextPlan_id" required
                                                  class="form-control" autocomplete='off' name="nextPlan"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" id="close-modal-progress" class="btn btn-default"
                                        data-dismiss="modal">关闭
                                </button>
                                <button type="submit" class="btn btn-primary" id="addProgress">添加进度</button>
                            </div>
                        </form>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
    <div style="margin-top: 5px;">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12">
                    <h4 class="clickMe" style="color:blue;text-decoration: underline;">项目基本情况：</h4>
                    <div id="more_show" class="col-xs-12 clearfix" hidden>
                        <div class="hero-unit well" style="padding: 10px; margin-bottom: 5px;">
                            <div class="row clearfix">
                                <div class="col-md-6 column">
                                    <p class="pType">
                                        项目名称 : ${newProject.name}
                                    </p>
                                </div>
                                <div class="col-md-6 column">
                                    <p class="pType">
                                        项目状态 : ${projectList.status == "1" ? "待审批部门确认节点" :
                                            projectList.status == "2" ? "管理员未审核":
                                                    projectList.status == "3" ? "项目进行中":
                                                            projectList.status == "4" ? "已完成":
                                                                    projectList.status == "5" ? "审核不通过，请重新配置节点信息": "项目已暂停"}
                                    </p>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-6 column">
                                    <p class="pType">
                                        责任单位 : ${newProject.resDept}
                                    </p>
                                </div>
                                <div class="col-md-6 column">
                                    <p class="pType">
                                        项目联系人 : ${newProject.contactName}
                                    </p>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-6 column">
                                    <p class="pType">
                                        分管领导 : ${newProject.resUser}
                                    </p>
                                </div>
                                <div class="col-md-6 column">
                                    <p class="pType">
                                        征迁实施单位 :
                                        ${newProject.occupyDept}
                                        <c:if test="${newProject.occupyDept == null}">
                                            无
                                        </c:if>
                                    </p>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-6 column">
                                    <p class="pType">
                                        征迁责任人 :
                                        ${newProject.occupyResUser}
                                        <c:if test="${newProject.occupyResUser == null}">
                                            无
                                        </c:if>
                                    </p>
                                </div>
                                <div class="col-md-6 column">
                                    <p class="pType">
                                        征迁经办人 :
                                        ${newProject.occupyOperateUser}
                                        <c:if test="${newProject.occupyOperateUser == null}">
                                            无
                                        </c:if>
                                    </p>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-6 column">
                                    <p class="pType">
                                        计划投资总额(万元) : ${newProject.money}
                                    </p>
                                </div>
                                <div class="col-md-6 column">
                                    <p class="pType">
                                        初步选址 : ${newProject.address}
                                    </p>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <p class="pType">
                                        建设内容 : ${newProject.describes}
                                    </p>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-6 column">
                                    <p class="pType">
                                        行业类型
                                        : ${newProject.natureType == '0' ? '政府投资类' : projectList.natureType == '1' ? '企业投资类' : '土地收储类'}
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="clearfix">
                        <div style="float: left">
                            <h4>征迁计划：</h4>
                        </div>
                        <div style="float: right">
                            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myPlanModal">
                                填写计划
                            </button>
                        </div>
                    </div>

                    <c:if test="${plans != ''}">
                        <div class="hero-unit well" style="padding: 10px; margin-bottom: 5px;">
                            <c:forEach var="plans" items="${plans}">
                                <div class="row">
                                    <div class="col-md-5 column">
                                        <p class="pType">
                                            计划时间 : ${plans.dataTime}
                                        </p>
                                    </div>
                                    <div class="col-md-6 column">
                                        <p class="pType">
                                            征迁类型 : ${plans.relocateType == "1" ? "征地" :
                                                plans.relocateType == "2" ? "拆迁": ""}
                                        </p>
                                    </div>
                                    <div class="col-md-1 column" style="top: 21px;">
                                        <button class="btn btn-primary btn-sm deletePlan" value="${plans.sysId}">
                                            删除
                                        </button>
                                        <%--<a href="">删除</a>--%>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-5 column">
                                        <p class="pType">
                                            征迁目标 : ${plans.planData}${plans.dataUnit}
                                        </p>
                                    </div>
                                    <div class="col-md-6 column">
                                        <p class="pType">
                                            计划内容 : ${plans.content}
                                        </p>
                                    </div>
                                </div>
                                <HR style="border: 1px solid #bbb; width: 100%; margin: 10px 0;">
                            </c:forEach>
                        </div>
                    </c:if>
                    <c:if test="${plans == ''}">
                        <div class="hero-unit well">
                            无征迁计划！
                        </div>
                    </c:if>

                    <div class="clearfix">
                        <div style="float: left">
                            <h4>征迁进度：</h4>
                        </div>
                        <div style="float: right">
                            <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
                                填报进度
                            </button>
                        </div>
                    </div>

                    <div class="tabbable" id="tabs-764270">
                        <ul class="nav nav-tabs tabs_active">
                            <c:forEach var="list" items="${list}">
                                <li>
                                    <a href="#panel-${list.sysId}" data-toggle="tab">${list.dataTime}</a>
                                </li>
                            </c:forEach>
                        </ul>
                        <div class="tab-content">
                            <c:forEach var="list" items="${list}">
                                <div class="tab-pane" id="panel-${list.sysId}">
                                    <div class="container">
                                        <div class="row clearfix">
                                            <div class="col-md-12 column">
                                                <table class="table table-bordered">
                                                    <thead>
                                                    <tr>
                                                        <th>
                                                            编号
                                                        </th>
                                                        <th>
                                                            项目
                                                        </th>
                                                        <th>
                                                            内容
                                                        </th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>
                                                            1
                                                        </td>
                                                        <td>
                                                            填报时间
                                                        </td>
                                                        <td>
                                                                ${list.dataTime}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            2
                                                        </td>
                                                        <td>
                                                            完成值
                                                        </td>
                                                        <td>
                                                                ${list.progressData}${list.dataUnit}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            3
                                                        </td>
                                                        <td>
                                                            进度描述
                                                        </td>
                                                        <td>
                                                                ${list.progressDescription}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            4
                                                        </td>
                                                        <td>
                                                            存在问题、需协调事项
                                                        </td>
                                                        <td>
                                                                ${list.problem}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            5
                                                        </td>
                                                        <td>
                                                            下一步计划
                                                        </td>
                                                        <td>
                                                                ${list.nextPlan}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            6
                                                        </td>
                                                        <td>
                                                            填报人
                                                        </td>
                                                        <td>
                                                                ${list.fillUser}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            7
                                                        </td>
                                                        <td>
                                                            责任单位
                                                        </td>
                                                        <td>
                                                                ${list.fillDept}
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%--修改模态框--%>

<script src="<s:url value="/assets/web/js/jquery.min.js"></s:url>"></script>
<script src="<s:url value="/assets/web/js/bootstrap.min.js"></s:url>"></script>
<script src="<s:url value="/assets/web/common/bootstrapvalidator/dist/js/bootstrapValidator.js"></s:url>"></script>
<script src="<s:url value="/assets/web/js/baseAPI.js"></s:url>"></script>
<script src="<s:url value="/assets/js/date-time/bootstrap-datepicker.js"></s:url>"></script>
<script>

    $(function () {

        //显示隐藏
        $(".clickMe").click(function () {
            if ($(this).text() === "项目基本情况：") {
                $("#more_show").show(100);
                $(this).text("项目基本情况： ")
            } else if ($(this).text() === "项目基本情况： ") {
                $("#more_show").hide(100);
                $(this).text("项目基本情况：");
            }
        });

        //给第一条加标签
        $(".tabs_active").each(function () {
            $(this).find("li").first().addClass("active");
        });

        $(".tab-content").each(function () {
            $(this).find(".tab-pane").first().addClass("active");
        });

        //选择年月日
        $('.date-picker').datepicker({
            inline: true,
            format: "yyyymmdd",
            autoclose: true,
            todayHighlight: true,
            language: 'cn'
        });
        //只选择年月
        $('.date-picker1').datepicker({
            format: 'yyyy-mm',
            autoclose: true,
            startView: 1,
            minViewMode: 1,
            maxViewMode: 1,
            language: 'cn'
        });

        $(".deletePlan").click(function () {
            var win = confirm("确认删除此计划？");
            if (win == true) {
                var sysId = $(this).val();
                $.ajax({
                    type: "get",
                    url: "/web/relocate/deletePlan/"+sysId,
                    dataType: "json",
                    contentType: 'application/json;charset=utf-8',
                    success: function (res) {
                        if (res.code == '200') {
                            if (res.data == '0') {
                                alert(res.message);
                            } else {
                                alert(res.message);
                                location.reload();
                            }
                        } else {
                            alert("系统错误-删除征迁计划");
                        }
                    }
                })
            }
        });

        //提交进度
        $("#addProgress").click(function () {
            //表单序列化为json
            var para = $("#themeForm").serializeObject();
            para = JSON.stringify(para)
            $.ajax({
                type: "post",
                url: "/web/relocate/addRelocateProgress",
                dataType: "json",
                contentType: 'application/json;charset=utf-8',
                data: para,
                success: function (res) {
                    if (res.code == '200') {
                        if (res.data == '0') {
                            alert(res.message);
                        } else {
                            alert(res.message);
                            location.reload();
                        }
                    } else {
                        alert("添加失败");
                    }
                }
            })
        });


        //提交征迁计划
        $("#addPlan").click(function () {
            //表单序列化为json
            var para = $("#themeForm_plan").serializeObject();
            para = JSON.stringify(para)
            $.ajax({
                type: "post",
                url: "/web/relocate/addRelocatePlan",
                dataType: "json",
                contentType: 'application/json;charset=utf-8',
                data: para,
                success: function (res) {
                    if (res.code == '200') {
                        if (res.data == '0') {
                            alert(res.message);
                        } else {
                            alert(res.message);
                            location.reload();
                        }
                    } else {
                        alert(res.message);
                    }
                }
            })
        })
    });

    //表单序列化-方法
    $.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    function CheckInputIntFloat(oInput) {
        if ('' != oInput.value.replace(/\d{1,}\.{0,1}\d{0,}/, '')) {
            oInput.value = oInput.value.match(/\d{1,}\.{0,1}\d{0,}/) == null ? '' : oInput.value.match(/\d{1,}\.{0,1}\d{0,}/);
        }
    }
</script>
</body>
</html>